<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import {
    debounce
  } from '@/utils'
  import meterWarning from '@/api/meter/meterWarning.js'
  import cabinetWarning from '@/api/cabinet/cabinetWarning.js'

  const animationDuration = 6000

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '280px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHandler = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHandler)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHandler)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons');
        var myDate = new Date();
        var weekDate = new Date(myDate.getTime() - (myDate.getDay() + 7) * 24 * 3600 * 1000);
        var weekDateLast = new Date(myDate.getTime() - (myDate.getDay() + 1) * 24 * 3600 * 1000);
        var firstday = weekDate.getFullYear() + '-' + (weekDate.getMonth() + 1) + '-' + weekDate.getDate() + ' 00:00:00';
        var lastday = weekDateLast.getFullYear() + '-' + (weekDateLast.getMonth() + 1) + '-' + weekDateLast.getDate() + ' 23:59:59';
        meterWarning.get().then(res => {
          var totalElements = res.totalElements;
          meterWarning.get({
              page: 0,
              size: totalElements,
              sort: 'id,desc',
              createTime: firstday + ',' + lastday
            }).then(res => {
              var weekMeterData = [];
              var SunMeter = 0;
              var MonMeter = 0;
              var TueMeter = 0;
              var WedMeter = 0;
              var ThuMeter = 0;
              var FriMeter = 0;
              var SatMeter = 0;
              res.content.forEach(item => {
                var time = item.createTime.split(' ')[0];
                var weekMeter = new Date(time).getDay();
                switch (weekMeter) {
                  case 0 : SunMeter++;
                    break;
                  case 1 : MonMeter++;
                    break;
                  case 2 : TueMeter++;
                    break;
                  case 3 : WedMeter++;
                    break;
                  case 4 : ThuMeter++;
                    break;
                  case 5 : FriMeter++;
                    break;
                  case 6 : SatMeter++;
                    break;
                }
              weekMeterData = [MonMeter, TueMeter, WedMeter, ThuMeter, FriMeter, SatMeter, SunMeter];
              })
              cabinetWarning.get({
                page: 0,
                size: totalElements,
                sort: 'id,desc',
                createTime: firstday + ',' + lastday
              }).then(resCabinet => {
                var weekCabinetData = [];
                var SunCabine = 0;
                var MonCabine = 0;
                var TueCabine = 0;
                var WedCabine = 0;
                var ThuCabine = 0;
                var FriCabine = 0;
                var SatCabine = 0;
                resCabinet.content.forEach(item1 => {
                  var time = item1.createTime.split(' ')[0];
                  var weekCabine = new Date(time).getDay();
                  switch (weekCabine) {
                    case 0 : SunCabine++;
                      break;
                    case 1 : MonCabine++;
                      break;
                    case 2 : TueCabine++;
                      break;
                    case 3 : WedCabine++;
                      break;
                    case 4 : ThuCabine++;
                      break;
                    case 5 : FriCabine++;
                      break;
                    case 6 : SatCabine++;
                      break;
                  }
                weekCabinetData = [MonCabine, TueCabine, WedCabine, ThuCabine, FriCabine, SatCabine, SunCabine];
              })
              this.chart.setOption({
                title: {
                  text: '上周警报信息/条'
                },
                grid:{          //显示数据的图表位于当前canvas的坐标轴
                  x:50,
                  y:40,
                  x2:45,
                  y2:32,
                  borderWidth:1
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['充电桩', '电表']
                },
                toolbox: {
                  show: true,
                  feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                xAxis: [
                  {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    max: function(value) {
                      return value.max + 100;
                    }
                  }
                ],
                series: [
                  {
                    name: '充电桩',
                    type: 'bar',
                    data: weekCabinetData,
                    markPoint: {
                      data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                      ]
                    },
                    markLine: {
                      data: [{ type: 'average', name: 'Avg' }]
                    }
                  },
                  {
                    name: '电表',
                    type: 'bar',
                    data: weekMeterData,
                    markPoint: {
                      data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                      ]
                    },
                    markLine: {
                      data: [{ type: 'average', name: 'Avg' }]
                    }
                  }
                ]
              })
            })
          })
        })
      }
    }
  }
</script>
